﻿<template>
  <div class="container">
    <div class="app-container">
      组织架构
      <el-dropdown>
        <!-- 常驻结构 -->
        <!-- <template #default> -->
        <div>
          <span>操作</span>
          <i class="el-icon-arrow-down" />
        </div>
        <!-- </template> -->
        <!-- 弹出结构 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>操作1</el-dropdown-item>
            <el-dropdown-item>操作2</el-dropdown-item>
            <el-dropdown-item>操作3</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 学习el-tree -->
      <el-tree :data="list" empty-text="没了" :props="{label:'name'}" default-expand-all>
        <!-- 默认插槽可以定制每行节点的结构 -->
        <template #default="obj">
          <!-- 我希望拿到这一行的数据 => 作用域插槽 -->
          <!-- obj.data当前行数据 -->
          <!-- <span>😄-{{ obj.data.name }}</span> -->
          <!-- <div style="display: flex; justify-content: space-between;background-color: pink;width: 100%;">
            <div>{{ obj.data.name }}</div>

            <div style="display: flex;">
              <div>张三</div>
              <div style="margin-left: 50px;">下拉</div>
            </div>
          </div> -->
          <el-row style="width: 100%">
            <!-- 默认分24 -->
            <el-col :span="20">{{ obj.data.name }}</el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">{{ obj.data.managerName }}</el-col>
                <el-col :span="12">
                  <!-- 下拉 -->
                  <el-dropdown @command="handleCommand($event,obj.data.id)">
                    <!-- 常驻结构 -->
                    <div>
                      <span>操作</span>
                      <i class="el-icon-arrow-down" />
                    </div>
                    <!-- 弹出结构 -->
                    <template #dropdown>
                      <el-dropdown-menu>
                        <!-- <el-dropdown-item @click.native="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item>编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item> -->
                        <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                        <el-dropdown-item command="del">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!-- 弹窗没出现 不是弹窗没创建 只是看不见而已 -->
      <AddDept :show-dialog.sync="show" :current-id="currentId" @refresh="getDepartment" />

    </div>
  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { transformListToTree } from '@/utils'
// import { transform } from 'jest.config'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Department',
  components: {
    AddDept
  },
  data() {
    return {
      show: false,
      list: [
        // 每个节点都是一个对象
        // 必须拥有一个属性label 文本描述
        // 可选属性children 是否有子节点
        // 字段名是默认的 有可能实际使用需要更换字段名
        // {
        //   name: '节点1',
        //   children: [
        //     { name: '节点1-1' },
        //     { name: '节点1-2' },
        //     {
        //       name: '节点1-3',
        //       children: [
        //         { name: '节点1-3-1' },
        //         {
        //           name: '节点1-3-2',
        //           children: [
        //             { name: '节点1-3-2-1' },
        //             { name: '节点1-3-2-2' }
        //           ]
        //         }
        //       ]
        //     }
        //   ]
        // },
        // {
        //   name: '节点2'
        // },
        // {
        //   name: '节点3'
        // }
      ],
      currentId: null // 当前操作部门的id
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    handleCommand(type, id) {
      console.log(222, type, id)
      if (type === 'add') {
        this.show = true
        this.currentId = id // 把当前操作部门的id存下来 给添加部门用
      }
      if (type === 'edit') {
        //

      }
      if (type === 'del') {
        //

      }
    },
    add() {
      console.log(111)
      this.show = true
    },
    async getDepartment() {
      const result = await getDepartment()
      //   this.list = this.transformListToTree(result, 7)
      //   this.list = this.transformListToTree(result, 4)
      this.list = transformListToTree(result, 0)
      // this.list = result
    }

  }
}
</script>
